<template>
	<view class="container">
		<view class="carousel">
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item" v-for="(item,index) in product.imglist" :key="index">
					<view class="image-wrapper">
						<image :src="`${tempUrl}${item}`" class="loaded" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="introduce-section">
			<!-- 恒源祥2019春季长袖白色t恤 新款春装 -->
			<text class="title" style="display: flex;flex-wrap: wrap;">
				{{ `${product.gname} ${product.title} ${product.title2}`}}
			</text>
			<view class="price-box">
				<text class="price-tip">¥</text>
				<text class="price">{{product.price?product.price:0}}</text>起
			</view>
			<view class="bot-row">
				<text>销量:{{product.sell?product.sell:0}}</text>
				<text>库存: {{product.stock?product.stock:0}}</text>
			</view>
		</view>

		<view class="c-list">
			<view class="c-row b-b" @click="urls=0;toggleSpec()">
				<text class="tit">购买类型</text>
				<view class="con">
					<text class="selected-text">
						{{specSelected.join(" ")}}
					</text>
				</view>
				<text class="yticon icon-you"></text>
			</view>
			<view class="c-row b-b">
				<text class="tit">服务</text>
				<view class="bz-list con">
					<text>7天无理由退换货 ·</text>
					<text>假一赔十 ·</text>
				</view>
			</view>
		</view>

		<view class="detail-desc">
			<view class="d-header">
				<text>图文详情</text>
			</view>
			<div style="width:100%;height: 100%;text-align: center;" v-if="product.info">
				<block v-for="(item,index) in product.info" :key="index">
					<view class="image-wrapper">
						<image :src="`${tempUrl}${item}`" class="loaded" mode="aspectFill"></image>
					</view>
				</block>
			</div>
			<div v-else style="text-align: center;">无</div>
			<!-- </view> -->
		</view>

		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
				<text class="yticon icon-xiatubiao--copy"></text>
				<text>首页</text>
			</navigator>
			<navigator url="/shopping/cart/cart" open-type="switchTab" class="p-b-btn">
				<text class="yticon icon-gouwuche"></text>
				<text>购物车</text>
			</navigator>
			<view class="action-btn-group">
				<button type="primary" class=" action-btn no-border buy-now-btn"
					@click="urls=1;toggleSpec()">立即购买</button>
				<button type="primary" class=" action-btn no-border add-cart-btn"
					@click="urls=2;toggleSpec()">加入购物车</button>
			</view>
		</view>
		<geek-sku
			:default-cover="`${tempUrl}${product.info[0]}`"
		    :isMaskClose="true"
			v-model="skuShow" :data="skus" 
		    :themeColor="[226, 35, 26]"
			:btnConfirmText="btnTitle"
			notStockText="库存不足"
			notSelectSku="请选择完整的商品信息" 
			@skuChange="skuChange" 
			@confirm="skuConfirm"></geek-sku>
	</view>
</template>

<script>
	// import share from '@/components/share';
	import {
		baseUrl
	} from "@/common/js/request.js"
	import {
		getSpecs,
		getGoods
	} from "../../api/good.js"
	import{ addCarts} from"../../api/cart.js"
	import {
		mapState,mapMutations
	} from 'vuex';
	import {
	addOrder
}from "../../api/order.js"
	export default {
		components: {
			// share
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		data() {
			return {
				btnTitle:'购买',
				skuShow: false,
				tempUrl: '',
				product: {
					imglist: [],
					info: [],
					title: '',
					title2: '',
					gname: '',
					price: '',
					sell: '',
					stock: '',
				},
				urls: 0,
				cartUrl: '/shopping/cart/cart',
				buyUrl: '/shopping/order/createOrder',
				specClass: 'none',
				specSelected: [],
				favorite: true,
				desc: ``,
				gid: '',
				skus:[],
				user:{}
			};
		},
		onLoad(options) {
			const item = options.data ? JSON.parse(decodeURIComponent(options.data)) : '';
			this.gid=item.gid?item.gid:6;
			// this.gid=6;

			getGoods({
				gid: this.gid
			}).then(res => {
				if (res.code == 200) {
					let data = res.data.records[0]
					this.product = data;
					this.product.imglist = data.imglist.split(",")
					this.product.info = data.info.split(",")
				}
			})
			getSpecs({
				gid: this.gid
			}).then(res => {
				let data=res.data;
				this.skus=data.map(item=>{
					return {
						price:item.goodsPrice,
						stock:item.goodsStock,
						sku_attrs:JSON.parse(item.specs),
						id:item.id,
						gid:item.gid
					}
				})
				this.specSelected=[]
				Object.keys(this.skus[0].sku_attrs).map(item=>{
					this.specSelected.push(this.skus[0].sku_attrs[item])
				})
				
			})
		},
		created() {
			this.user=this.$store.state.userInfo;
			this.tempUrl = this.baseUrl
		},
		methods: {
				//选择规格
			skuChange(sku) {
				let {sku_attrs}=sku
				this.specSelected=[]
				Object.keys(sku_attrs).map(item=>{
					this.specSelected.push(sku_attrs[item])
				})
				
			},
			// sku确认事件
			skuConfirm(e) {
				let {num,sku,skuText}=e
				this.specSelected=skuText
				let url=this.urls>1?this.cartUrl:this.buyUrl;
				if(this.urls>0){
					if(this.urls==1){
						let form={}
						//form.ordNo=new Date().getTime()+""+this.user.uid
						form.uid=this.user.uid
						form.quantity=num
						form.price=sku.price
						form.gid=this.product.gid;
						form.specsid=sku.id
						form.specs=skuText.join(" ")
						this.product.goodsVo=form;
						console.log(this.product)
						if(num<=sku.stock){
							uni.navigateTo({
								url: `${url}?data=${encodeURIComponent(JSON.stringify({name:'single',data:[this.product]}))}`
							});
						}else{
								this.$commonFunc.msg("库存不够")
						}
						// addOrder(form).then(res=>{
						// 	if(res.code==200){
						// 		//this.$commonFunc.msg("添加成功")
						// 		uni.navigateTo({
						// 			url: `${url}`
						// 		});
						// 	}
							
						// })
					}else{
						//添加购物车
						let form={}
						form.uid=this.user.uid;
						form.gid=this.product.gid;
						form.gname=this.product.gname;
						form.price=sku.price;
						form.pic=this.product.info[0];
						form.specsid=sku.id;
						form.specs=skuText.join(" ");
						form.quantity=num;
						addCarts(form).then(res=>{
							if(res.code==200){
								this.$commonFunc.msg("添加成功")
								// uni.navigateTo({
								// 	url: `${url}`
								// });
							}else{
								this.$commonFunc.msg("添加失败")
							}
							
						})
					}
					
					
				}else{
					this.skuShow=false;
				}
			},
			//规格弹窗开关
			toggleSpec() {
				//购买登录
				this.skuShow = true
				if(this.urls>0){
					this.btnTitle=this.urls>1?"添加到购物车":"立即购买";
				}else{
					this.btnTitle="完成"
				}
			},
		
			//收藏
			toFavorite() {
				this.favorite = !this.favorite;
			},
			// buy(){
			// 	uni.navigateTo({
			// 		url: `/pages/order/createOrder`
			// 	})
			// },
			stopPrevent() {}
		},

	}
</script>

<style lang='scss'>
	page {
		background: $page-color-base;
		padding-bottom: 160upx;
	}

	.icon-you {
		font-size: $font-base + 2upx;
		color: #888;
	}

	.carousel {
		height: 722upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	/* 标题简介 */
	.introduce-section {
		background: #fff;
		padding: 20upx 30upx;

		.title {
			font-size: 32upx;
			color: $font-color-dark;
			height: 50upx;
			line-height: 50upx;
		}

		.price-box {
			display: flex;
			align-items: baseline;
			height: 64upx;
			padding: 10upx 0;
			font-size: 26upx;
			color: $uni-color-primary;
		}

		.price {
			font-size: 50rpx;
		}

		.m-price {
			margin: 0 12upx;
			color: $font-color-light;
			text-decoration: line-through;
		}

		.coupon-tip {
			align-items: center;
			padding: 4upx 10upx;
			background: $uni-color-primary;
			font-size: $font-sm;
			color: #fff;
			border-radius: 6upx;
			line-height: 1;
			transform: translateY(-4upx);
		}

		.bot-row {
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			height: 50upx;
			font-size: $font-sm;
			color: $font-color-light;

			text {
				flex: 1;
			}
		}
	}


	.c-list {
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		background: #fff;

		.c-row {
			display: flex;
			align-items: center;
			padding: 20upx 30upx;
			position: relative;
		}

		.tit {
			width: 140upx;
		}

		.con {
			flex: 1;
			color: $font-color-dark;

			.selected-text {
				margin-right: 10upx;
			}
		}

		.bz-list {
			height: 40upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;

			text {
				display: inline-block;
				margin-right: 30upx;
			}
		}

		.con-list {
			flex: 1;
			display: flex;
			flex-direction: column;
			color: $font-color-dark;
			line-height: 40upx;
		}

		.red {
			color: $uni-color-primary;
		}
	}

	/*  详情 */
	.detail-desc {
		background: #fff;
		margin-top: 16upx;

		.d-header {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			position: relative;

			text {
				padding: 0 20upx;
				background: #fff;
				position: relative;
				z-index: 1;
			}

			&:after {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300upx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc;
			}
		}
	}

	/* 规格选择弹窗 */
	.attr-content {
		padding: 10upx 30upx;

		.a-t {
			display: flex;

			image {
				width: 170upx;
				height: 170upx;
				flex-shrink: 0;
				margin-top: -40upx;
				border-radius: 8upx;
				;
			}

			.right {
				display: flex;
				flex-direction: column;
				padding-left: 24upx;
				font-size: $font-sm + 2upx;
				color: $font-color-base;
				line-height: 42upx;

				.price {
					font-size: $font-lg;
					color: $uni-color-primary;
					margin-bottom: 10upx;
				}

				.selected-text {
					margin-right: 10upx;
				}
			}
		}

		.attr-list {
			display: flex;
			flex-direction: column;
			font-size: $font-base + 2upx;
			color: $font-color-base;
			padding-top: 30upx;
			padding-left: 10upx;
		}

		.item-list {
			padding: 20upx 0 0;
			display: flex;
			flex-wrap: wrap;

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				margin-right: 20upx;
				margin-bottom: 20upx;
				border-radius: 100upx;
				min-width: 60upx;
				height: 60upx;
				padding: 0 20upx;
				font-size: $font-base;
				color: $font-color-dark;
			}

			.selected {
				background: #fbebee;
				color: $uni-color-primary;
			}
		}
	}

	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			/* width: 100%; */
			min-height: 40vh;
			border-radius: 10upx 10upx 0 0;
			background-color: #fff;

			.btn {
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: $uni-color-primary;
				font-size: $font-base + 2upx;
				color: #fff;
				margin: 30upx auto 20upx;
			}
		}

		@keyframes showPopup {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes hidePopup {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}

			100% {
				transform: translateY(0%);
			}
		}

		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(120%);
			}
		}
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		left: 30upx;
		bottom: 30upx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690upx;
		height: 100upx;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
		border-radius: 16upx;

		.p-b-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;

			.yticon {
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}

			&.active,
			&.active .yticon {
				color: $uni-color-primary;
			}

			.icon-fenxiang2 {
				font-size: 42upx;
				transform: translateY(-2upx);
			}

			.icon-shoucang {
				font-size: 46upx;
			}
		}

		.action-btn-group {
			display: flex;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
			margin-left: 20upx;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28upx;
				width: 0;
				border-right: 1px solid rgba(255, 255, 255, .5);
			}

			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 180upx;
				height: 100%;
				font-size: $font-base;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}
		}
	}
</style>
